<template>
    <!--地图挂载dom-->
    <div id="map">
        <div class="MapTool">
            <el-select v-model="value" placeholder="请选择" @change="drawChange">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import {Draw, Select, Modify, Snap, Pointer} from 'ol/interaction';
    import Polygon from 'ol/geom/Polygon';
    import {OSM, Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {Circle as CircleStyle, Fill, Stroke, Style, Icon} from 'ol/style';
    import marker from './data/marker.png'

    export default {
        name: 'PointerInteraction',
        data() {
            return {
                options: [{
                    value: 'Point',
                    label: '点'
                }, {
                    value: 'LineString',
                    label: '线'
                }, {
                    value: 'Polygon',
                    label: '面'
                }, {
                    value: 'Circle',
                    label: '圆'
                }],
                value: ''
            }
        },
        mounted() {
            const image = new Icon({
                src: marker,
                anchor: [0.75, 0.5],
                rotateWithView: true,
            })

            const styles = {
                'Point': new Style({
                    image: image,
                }),
                'LineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiLineString': new Style({
                    stroke: new Stroke({
                        color: 'green',
                        width: 1,
                    }),
                }),
                'MultiPoint': new Style({
                    image: image,
                }),
                'MultiPolygon': new Style({
                    stroke: new Stroke({
                        color: 'yellow',
                        width: 1,
                    }),
                    fill: new Fill({
                        color: 'rgba(255, 255, 0, 0.1)',
                    }),
                }),
                'Polygon': new Style({
                    stroke: new Stroke({
                        color: 'blue',
                        lineDash: [4],
                        width: 3,
                    }),
                    fill: new Fill({
                        color: 'rgba(0, 0, 255, 0.1)',
                    }),
                }),
                'GeometryCollection': new Style({
                    stroke: new Stroke({
                        color: 'magenta',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'magenta',
                    }),
                    image: new CircleStyle({
                        radius: 10,
                        fill: null,
                        stroke: new Stroke({
                            color: 'magenta',
                        }),
                    }),
                }),
                'Circle': new Style({
                    stroke: new Stroke({
                        color: 'red',
                        width: 2,
                    }),
                    fill: new Fill({
                        color: 'rgba(255,0,0,0.2)',
                    }),
                }),
            };

            const styleFunction = function (feature) {
                return styles[feature.getGeometry().getType()];
            };
            this.source = new VectorSource({wrapX: false});
            const vector = new VectorLayer({
                source: this.source,
                style: styleFunction,
            });
            //初始化地图
            this.map = new Map({
                target: 'map',//指定挂载dom，注意必须是id
                layers: [
                    new TileLayer({
                        source: new OSM()//加载OpenStreetMap
                    }),
                    vector
                ],
                //配置视图
                view: new View({
                    center: [113.24981689453125, 23.126468438108688], //视图中心位置
                    projection: "EPSG:4326", //指定投影
                    zoom: 12   //缩放到的级别
                })
            });

            // const select = new Select();
            // this.map.addInteraction(select);
            // //
            // const modify = new Modify({source: this.source});
            // this.map.addInteraction(modify);
            //
            // //必须在修改和绘制交互之后添加捕捉交互
            // const snap = new Snap({source: this.source});
            // this.map.addInteraction(snap);

            //鼠标交互事件
            let pointer = new Pointer({
                //handleDownEvent: this.handleDownEventFun,
                handleUpEvent: this.handleUpEventFun,
                //handleDragEvent: this.handleDragEventFun,
                //handleMoveEvent: this.handleMoveEventFun
            });
            this.map.addInteraction(pointer);


        },
        methods: {
            drawChange(type) {
                if (this.map) {
                    this.map.removeInteraction(this.draw);
                    this.addDraw(type)
                }
            },
            addDraw(type) {
                if (type !== 'None') {
                    this.draw = new Draw({
                        source: this.source,
                        type: type,
                    });
                    this.map.addInteraction(this.draw);
                }
            },
            handleDownEventFun(event) {
                debugger
                console.log(event)
            },
            handleUpEventFun(event) {
                debugger
                console.log(event)
            },
            handleDragEventFun(event) {
                debugger
                console.log(event)
            },
            handleMoveEventFun(event) {
                console.log(event)
            }

        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>
